<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <!--添加 CSRF 支持-->
    <meta name="_csrf" th:content="${_csrf.token}"/>
    <meta name="_csrf_header" th:content="${_csrf.headerName}"/>

    <title>用户注册界面</title>
    <link th:href="@{/login/css/bootstrap1.css}" rel="stylesheet">
    <script th:src="@{/login/js/bootstrap1.js}"></script>
    <script th:src="@{/login/js/jquery.js}"></script>
    <link th:href="@{/login/css/signIn.css}" rel="stylesheet">
</head>
    <body class="text-center">
        <div class="card">
            <form class="row form-signin" th:action="@{/doRegister}" method="post" th:object="${user}" style="position: relative">
                <div style="width:100%;text-align:center;">
                    <img class="mb-2"
                         th:src="@{/login/img/login.jpg}"
                         style="width:80px;height:80px;object-fit:cover;display:inline-block;">
                    <!--   img是行内元素所以无法直接调距离居中
                    object-fit:cover 防止变形,<img> 再套一层 100% 宽度的行内块，让 auto 有空间计算-->
                </div>
                <div class="gap-2 mb-1" style="position: absolute;left: 120px">
                    <a class="btn btn-sm btn-outline-secondary" href="/toLogin" th:text="#{login.signIn}"></a>
                </div>
                <h1 class="h3 mb-3 font-weight-normal" th:text="#{login.tip2}"></h1>
                <!-- 消息提示 -->
                <div th:if="${msg}" class="alert alert-success">
                    <span th:text="${msg}"></span>
                </div>
                <div th:if="${error}" class="alert alert-danger">
                    <span th:text="${error}"></span>
                </div>
                <div class="col-12" style="margin-top: -20px">
                    <label for="username" class="form-label"></label>
                    <input type="text" class="form-control"
                           th:placeholder="#{login.username}" id="username"
                           name="username" th:field="*{username}" required="" autofocus="">
                </div>
                <div class="col-12">
                    <label for="password" class="form-label"></label>
                    <input type="password" class="form-control"
                           th:placeholder="#{login.password}" id="password" th:field="*{password}" name="password" required="">
                </div>
                <!-- 邮箱 -->
                <div class="mb-3">
                    <label for="email" class="form-label"></label>
                    <input type="email" class="form-control"
                          th:placeholder="#{login.email}" th:field="*{email}" id="email" name="email">
                </div>
                <!-- 验证码 -->
                <div class="mb-3">
                    <div class="input-group">
                        <input type="text" name="verifyCode" class="form-control" th:placeholder="#{login.verifyCode}">
                        <button type="button" id="sendCodeBtn" class="btn btn-secondary" th:text="#{login.getVerifyCode}"></button>
                    </div>
                </div>
                <button class="btn btn-lg btn-primary btn-block" type="submit" th:text="#{login.register}" style="margin-top: 10px"></button>
                <p class="mb-1 text-muted" style="margin-top: 5px">© <span th:text="${currentYear}">2018</span>-<span th:text="${currentYear}+1">2019</span></p>
                <div class="d-flex justify-content-center gap-2 mb-1">
                    <a class="btn btn-sm btn-outline-secondary" th:href="@{/register(l='zh_CN')}">中文</a>
                    <a class="btn btn-sm btn-outline-secondary" th:href="@{/register(l='en_US')}">English</a>
                </div>
<!--                <input type="hidden" th:name="${_csrf.parameterName}" th:value="${_csrf.token}" />-->
            </form>
        </div>
        <script>
            // 验证码发送逻辑
            $(function() {
                // 获取 CSRF token 和 header name
                const csrfToken = $('meta[name="_csrf"]').attr('content');
                const csrfHeader = $('meta[name="_csrf_header"]').attr('content');
                // 设置 AJAX 全局默认请求头（推荐）
                $.ajaxSetup({
                    beforeSend: function(xhr) {
                        if (csrfToken && csrfHeader) {
                            xhr.setRequestHeader(csrfHeader, csrfToken);
                        }
                    }
                });

                let countdown = 60;
                let isSending = false;

                $("#sendCodeBtn").click(function() {
                    const email = $("input[name='email']").val();
                    if (!email) {
                        alert("请输入邮箱");
                        return;
                    }
                    if (isSending) return;

                    isSending = true;
                    $(this).prop("disabled", true).text("发送中...");


                    $.post("/sendCode", { email: email }, function(result) {
                        if (result === "success") {
                            alert("验证码已发送");
                            let timer = setInterval(function() {
                                countdown--;
                                $("#sendCodeBtn").text(countdown + "秒后重发");
                                if (countdown <= 0) {
                                    clearInterval(timer);
                                    $("#sendCodeBtn").prop("disabled", false).text("获取验证码");
                                    countdown = 60;
                                    isSending = false;
                                }
                            }, 1000);
                        } else {
                            alert(result);
                            $("#sendCodeBtn").prop("disabled", false).text("获取验证码");
                            isSending = false;
                        }
                    });
                });
            });
        </script>
    </body>
</html>
